import React, { Component } from 'react';
import { Redirect } from "react-router-dom";
import {
  admin_login,
  updata_userinfo,
  getcode
} from '../axios/index.js';
import "./clock.css";
class clock extends Component {
  constructor(props){
    super(props);
    this.state={
      login:false,
      updateStatus:0 
    }
  }
  
  render() {
    return(
        this.state.login? <Redirect to="/home"></Redirect>
        :(<div className="bg">
          <div className="loginContain">
            <h3 className="Header">柴是杜父系统登录</h3>
            <div className="input_box">
              <input type="text" className="username"  required="required"/>
              <label htmlFor="">Username</label>
            </div>
            <div className="input_box">
              <input type="password" className="password"  required="required"/>
              <label htmlFor="">Password</label>
            </div>
            {
              this.state.updateStatus? (
              <div className="input_box">
                <input type="password" className="newpassword"  required="required"/>
                <label htmlFor="">Newpassword</label>
              </div>
              ):''
            }
            {
              this.state.updateStatus? (
              <div className="input_box" style={{display:'flex'}}>
                <input type="input" className="code_input" placeholder="请输入验证码" required="required"/>
                <div className="code_img" style={{width:'100px',height:'39px'}} onClick={() => this.getCode()}></div>
                {/* <img width="100px" height="39px" onClick={() => this.getCode()} className="code_img" src="" alt="" style={{background: 'rgba(255,255,255,.4)',borderRadius:'5px'}} /> */}
              </div>
              ):''
            }
            {
              this.state.updateStatus?(
                <button className="login" onClick={() => {
                  this.setState({updateStatus:0})
                document.querySelector(".username").value = ""
                document.querySelector(".password").value = ""}}>返回登录</button>
              ):(
                <button className="login" onClick={() => this.getData()}>登录</button>
              )
            }
            <button className="updata" onClick={() => this.setData()}>{this.state.updateStatus? "修改":"修改密码"}</button>
          </div>
        </div>)
    )
  }
  componentDidMount(){
    this.getCode(); //验证码
  }
  getData = async () => {  //登录
    let username = document.querySelector(".username").value;
    let password = document.querySelector(".password").value;
    if(username!==''&&password!==''){
      try{
        let data = await admin_login({username,password});
        console.log(data);
        sessionStorage.setItem('token',data.data.token)
        this.setState({
          login:true
        })
      } catch(err) {
        alert(err);
      }
    }else{
      alert('未填写帐号或者密码')
    }
  }
  setData = async () => { //修改密码
    if(this.state.updateStatus){
      let codetext = sessionStorage.getItem('codetext');
      let username = document.querySelector(".username").value;
      let password = document.querySelector(".password").value;
      let newpassword = document.querySelector('.newpassword').value;
      let code = document.querySelector('.code_input').value;
      if(code != codetext){
        alert('验证码不正确')
        return;
      }
      try{
        let data = await updata_userinfo({username,password,newpassword,code})
        alert(data.data.infomation)
        document.querySelector('.newpassword').value = "";
        this.setState({updateStatus:0})
        document.querySelector('.password').value = newpassword;
      }catch(err){
        alert(err)
      }
    }else{
      this.setState({updateStatus:1})
      document.querySelector(".username").value = ""
      document.querySelector(".password").value = ""
      this.getCode();
    }
  }
  getCode = async () => {
    try {
      let codeurl = await getcode();
      sessionStorage.setItem('codetext',codeurl.data.text)
      document.querySelector(".code_img").innerHTML = codeurl.data.code
    } catch (error) {
      console.log(error)
    }
  }
 
}
export default clock;